<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style>
			.el-row {
				margin-bottom: 20px;

				&:last-child {
					margin-bottom: 0;
				}
			}

			.el-col {
				border-radius: 4px;
			}

			.bg-purple-dark {
				background: #99a9bf;
			}

			.bg-purple {
				background: #d3dce6;
			}

			.bg-purple-light {
				background: #e5e9f2;
			}

			.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}

			.row-bg {
				padding: 10px 0;
				background-color: #f9fafc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light"></div>
				</el-col>
			</el-row>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					visible: false
				}
			}
		})
	</script>
</html>
